<template>
  <div id="productDetail">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" width="100%" style="display:block" />
      </van-swipe-item>
    </van-swipe>

    <MyDesc />

    <div class="top">
      <h3>{{info.name}}</h3>
      <div class="van-ellipsis">{{info.goods_brief}}</div>
      <p>{{info.retail_price | yuan}}</p>
    </div>

    <!-- 弹出层 -->
    <van-cell is-link style="border-top: 1px solid #ccc;" @click="showSku=true">展示弹出层</van-cell>
      <transition name="van-fade">
    <div class="modal" v-if="showSku">
      <div class="modal_bg" @click="showSku = false"></div>
      <div class="content">
        <van-icon name="cross" class="close" size="20" @click="showSku = false" />
        <div class="modal_top">
          <img :src="info.list_pic_url" width="100" height="100" />
          <div class="right">
              <section>价格 {{info.retail_price | yuan}} </section>
              <section>库存 {{info.goods_number}} </section>
          </div>
        </div>
        <div class="down">
            <h3>数量：</h3>
            <van-stepper v-model="steValue" input-width="100px" min="1" :max="info.goods_number" />
        </div>
      </div>
    </div>
      </transition>

    <!-- 商品参数 -->
    <div class="attribute">
      <div class="title">商品参数</div>
      <ul>
        <li v-for="(item,i) in attribute" :key="i">
          <div class="left">{{item.name}}</div>
          <div class="right van-ellipsis">{{item.value}}</div>
        </li>
      </ul>
    </div>

    <div class="good_desc" ref="desc" v-html="info.goods_desc"></div>

    <!-- 常见问题 -->
    <div class="issue">
      <span class="title_span"></span>
      <div class="title">常见问题</div>
      <ul>
        <li v-for="item in issue" :key="item.id">
          <div class="li_title">{{item.question}}</div>
          <p>{{item.answer}}</p>
        </li>
      </ul>
    </div>

    <!-- 大家都在看 -->
    <div class="issue" style="margin-top:0">
      <span class="title_span"></span>
      <div class="title">大家都在看</div>
      <!-- 商品列表组件 -->
      <ProductList :goodsList="goodsList" />
    </div>

    

    <!-- 底部加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon 
      :icon="CartLanObj.isSave?'star':'star-o'" 
      :text="CartLanObj.isSave?'已收藏':'未收藏'" 
      :color="CartLanObj.isSave?'red':'#666'" 
      @click="CartLanObj.isSave=!CartLanObj.isSave"/>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="CartLanObj.count" to="/cart" />
      <van-goods-action-button type="warning" text="立即购买" @click="buyNew" />
      <van-goods-action-button type="danger" text="加入购物车" @click="addToCart" />
    </van-goods-action>
  </div>
</template>
 
<script>
import { GoodDetail, GoodRelated,GetCartCount,GetCartAdd } from "../request/api";
import MyDesc from "../components/MyDesc";
import ProductList from '../components/popup/ProductList'

export default {
  data() {
    return {
      gallery: [],
      info: [],
      attribute: [],
      issue: [],
      productList:[],
      goodsList:[],
      steValue:1,
      showSku:false,
      CartLanObj:{
        isSave:false,
        count:0
      }
    };
  },
  methods: {
    getData() {
      GoodDetail({
        id: this.$route.params.id,
      }).then((res) => {
        console.log(res);
        this.gallery = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.issue = res.data.issue;
        this.productList = res.data.productList;
      });
    },
    buyNew(){
      this.$toast("支付成功")
    },
    addToCart(){
      if(this.showSku){
        GetCartAdd({
          goodsId:this.$route.params.id,
          productId:this.productList[0].id,
          number:this.steValue
        }).then(res => {
          console.log(res);
          if(res.errno == 0){
            this.$toast("加入购物车成功");
            this.CartLanObj.count=res.data.cartTotal.goodsCount;
          }else{
            this.$toast("添加失败");
          }
        })
         this.showSku=false;
      }else{
        this.showSku=true;
      }
    },
    GetCartCounts(){
      GetCartCount().then(res => {
        console.log(res);
        this.CartLanObj.count = res.data.cartTotal.goodsCount;
      })
    }
  },
  created() {
    this.getData();
    this.GetCartCounts();
    GoodRelated({
      id:this.$route.params.id
    }).then(res => {
        this.goodsList = res.data.goodsList;
    })
  },
  watch: {
    $route:function(to,from){
      if(to.path != from.path){
        window.location.reload();
      }
    }
  },
  components: {
    MyDesc,
    ProductList
  },
};
</script>
 
<style lang = "less" scoped>
#productDetail {
  padding-bottom: 60px;
}
.top {
  text-align: center;
  background: #fff;
  padding: 20px 0;
  h3 {
    font-size: 18px;
  }
  p {
    color: darkred;
  }
  * {
    height: 40px;
    line-height: 40px;
  }
}

.attribute {
  margin-top: 20px;
  padding: 0 20px 20px;
  background: #fff;
  font-size: 16px;
  .title {
    text-align: left;
  }
  ul {
    li {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      background: #efefef;
      margin-bottom: 10px;
      padding: 0 5px;
      border-radius: 5px;
      .left {
        font-size: 12px;
        width: 80px;
        color: #999;
      }
      .right {
        flex: 1;
      }
    }
  }
}

/deep/.good_desc {
  img {
    width: 100%;
    display: block;
  }
}
.modal {
  width: 100vw;
  height: calc(100vh - 50px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  .modal_bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .content {
    padding: 20px 4%;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    text-align: left;
    .close{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .modal_top{
        display: flex;
        justify-content: space-between;
        .right{
            margin-left: 10px;
            flex: 1;
            line-height: 50px;
        }
    }
    .down{
        h3{
            height: 80px;
            line-height: 80px;
        }
    }
  }
}

.issue {
  background: #fff;
  position: relative;
  .title_span {
    display: block;
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 1.5px;
    background: #ccc;
    z-index: 0;
  }
  .title {
    position: relative;
    z-index: 10;
    background: #fff;
    width: 25%;
    margin: auto;
  }
  ul {
    margin: 0 30px;
    li {
      list-style: square;
      .li_title {
        font-size: 16px;
      }
      p {
        padding: 10px 0;
        color: #666;
      }
    }
  }
}
.van-popup {
  bottom: 50px;
}
.van-goods-action{
  z-index: 999;
}
</style>